<template>
  <div class="second-handHouse">
    <div class="container">
      <div class="w">
        <!-- 搜索栏-start -->
        <Search :searchText='params.title' @search="getSearchText"></Search>
        <!-- 搜索栏-end -->

        <!-- 多项筛选框-start -->
        <div class="select-box">
          <!-- 默认显示-start -->
          <div class="select-show">
            <div class="select-area clearfix">
              <div class="select-title fl"><b>区域</b></div>
              <div class="selection fl">
                <div class="select-tab">
                  <a :class="item.isActive?'active':''" v-for="(item, index) in areaData" :key="index" @click="changeRegion(item, index)">{{item.label}}</a>
                </div>
                <div class="second-tabs" v-show="areaData[firstRegion.index].children.length != 0">
                  <a :class="[v.isActive?'active':'', v.disabled?'disabled':'']" v-for="(v, i) in areaData[firstRegion.index].children" :key="i" @click="changeRegion(v, i)">
                    {{v.label}}
                  </a>
                </div>
              </div>
            </div>
            <!-- 价格-其他 -->
            <div class="select-area clearfix" v-for="(item, index) in tabList_show" :key="index">
              <div class="select-title fl">
                <b>{{ item.title }}</b>
              </div>
              <div class="selection fl">
                <div class="select-tab">
                  <el-checkbox-group :class="!item.isShow ? 'hasmore' : ''" v-model="checkList" text-color>
                    <el-checkbox v-for="(v, i) in item.tabs" :key="i" :label="v" @change="changeCheck(item.title, v)">{{ v }}</el-checkbox>
                    <!-- 自定义选项-start -->
                    <span class="selected-input" v-if="item.isShow">
                      <el-input v-model="p1" maxlength="5" onkeyup="value=value.replace(/[^\d]/g,'')"></el-input>
                      <span class="em">-</span>
                      <el-input v-model="p2" maxlength="5" onkeyup="value=value.replace(/[^\d]/g,'')"></el-input>
                      <span class="em">
                        {{((key) =>{
                          switch (key) {
                          case 0: return '万'; break;
                          case 1: return '㎡'; break;
                          default: return ''; break;
                          }
                        })(index)}}
                      </span>
                      <el-button size="mini" type='primary' :disabled="Number(p1) >= Number(p2) ? true : false" @click="addTag(index)">确定</el-button>
                    </span>
                    <!-- 自定义选项-end -->
                  </el-checkbox-group>
                </div>
                <div class="addTab fr" v-show="item.isMore" @click="changeMore(item)">
                  {{ item.isShow ? item.more_tip2:item.more_tip1 }}
                </div>
              </div>
            </div>
          </div>
          <!-- 默认显示-end -->

          <!-- 默认隐藏-start -->
          <el-collapse-transition>
            <div class="select-hide" v-show="hideTab.isShow">
              <div class="select-area clearfix" v-for="(item, index) in tabList_hide" :key="index">
                <div class="select-title fl">
                  <b>{{ item.title }}</b>
                </div>
                <div class="selection fl">
                  <div class="select-tab">
                    <el-checkbox-group :class="item.isShow ? '' : 'hasmore'" v-model="checkList" text-color>
                      <el-checkbox v-for="(v, i) in item.tabs" :key="i" :label="v" @change="changeCheck(item.title, v)">{{ v }}</el-checkbox>
                    </el-checkbox-group>
                  </div>
                  <div class="addTab fr" v-show="item.isMore" @click="changeMore(item)">
                    {{ item.isShow ? item.more_tip2:item.more_tip1 }}
                  </div>
                </div>
              </div>

              <div class="select-area clearfix">
                <div class="select-title fl">
                  <b>{{otherTabs.title}}</b>
                </div>
                <div class="selection fl">
                  <div class="select-tab">
                    <el-checkbox-group :class="otherTabs.isShow ? '' : 'hasmore'" v-model="checkList">
                      <el-checkbox v-for="(v, i) in otherTabs.tabs" :key="i" :label="v.name" @change="changeCheck(otherTabs.title, v.name)">
                        {{v.name}}
                        <el-tooltip v-show="v.isTip" class="topTip" :content="v.content" placement="top">
                          <i class="el-icon-question"></i>
                        </el-tooltip>
                      </el-checkbox>
                    </el-checkbox-group>
                  </div>
                  <div class="addTab fr" v-show="otherTabs.isMore" @click="changeMore(otherTabs)">
                    {{ otherTabs.isShow ? otherTabs.more_tip2:otherTabs.more_tip1 }}
                  </div>
                </div>
              </div>
            </div>
          </el-collapse-transition>
          <!-- 默认隐藏-end -->

          <div class="control" @click="changeMore(hideTab)">
            <span>{{ hideTab.isShow ? hideTab.tip2 : hideTab.tip1}}<i :class="hideTab.isShow ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i></span>
          </div>
          <!-- 标签 -->
          <div class="tags" v-show="checkList.length != 0 || firstRegion.index != 0">
            <span>当前选中:</span>
            <!-- 区级标签 -->
            <el-tag v-show="firstRegion.index != 0" closable color="#fff" disable-transitions @close="deleteRegion(firstRegion)">
              {{firstRegion.value}}
            </el-tag>
            <!-- 地方镖标签 -->
            <el-tag v-show="secondRegion.index != 0" closable color="#fff" disable-transitions @close="deleteRegion(secondRegion)">
              {{secondRegion.value}}
            </el-tag>
            <!-- 自定义标签 -->
            <!-- <el-tag v-show="" closable color="#fff" disable-transitions @close="deleteTag(index)">
              {{item}}
            </el-tag> -->
            <!-- 其他标签 -->
            <el-tag v-for="(item, index) in checkList" :key="index" closable color="#fff" disable-transitions @close="deleteTag(index)">
              {{item}}
            </el-tag>

            <em class="el-icon-delete" @click="deleteTags">清空筛选</em>
          </div>
        </div>
        <!-- 多项筛选框-end -->

        <div class="content clearfix" ref="content">
          <div class="house-resource fl">
            <div class="hd">
              <el-menu default-active="1" class="el-menu-demo" mode="horizontal" text-color="#000" active-text-color="#fff">
                <el-menu-item index="1"><b>全部</b></el-menu-item>
                <!-- <el-menu-item index="2"><b>VR看房</b></el-menu-item> -->
                <!-- <el-menu-item index="3"><b>虚拟装修</b></el-menu-item>
                <el-menu-item index="4"><b>视频看房</b></el-menu-item> -->
                <ul class="fr">
                  <li :class="order.active == 0 ? 'active' : ''" @click="changeOrder(0)">默认排序</li>
                  <li :class="order.active == 1 ? 'active' : ''" @click="changeOrder(1)">最新</li>
                  <li :class="order.active == 2 ? 'active' : ''" @click="changeOrder(2)">
                    总价
                    <i class="el-icon-caret-top" :style="order.active == 2 && order.type == 0 ? 'color:#00b16a;' : ''"></i>
                    <i class="el-icon-caret-bottom" :style="order.active == 2 && order.type == 1 ? 'color:#00b16a;' : ''"></i>
                  </li>
                  <li :class="order.active == 3 ? 'active' : ''" @click="changeOrder(3)">
                    单价
                    <i class="el-icon-caret-top" :style="order.active == 3 && order.type == 0 ? 'color:#00b16a;' : ''"></i>
                    <i class="el-icon-caret-bottom" :style="order.active == 3 && order.type == 1 ? 'color:#00b16a;' : ''"></i>
                  </li>
                  <li :class="order.active == 4 ? 'active' : ''" @click="changeOrder(4)">
                    面积
                    <i class="el-icon-caret-top" :style="order.active == 4 && order.type == 0 ? 'color:#00b16a;' : ''"></i>
                    <i class="el-icon-caret-bottom" :style="order.active == 4 && order.type == 1 ? 'color:#00b16a;' : ''"></i>
                  </li>
                </ul>
              </el-menu>
            </div>

            <div class="hd_title">
              <p>共为您找到广州二手房<b>{{params.total}}</b>套</p>
            </div>
            <div class="tip" v-show="params.total == 0"><i class="el-icon-search"></i>很抱歉, 没有找到符合你条件的房源o(╥﹏╥)o</div>
            <div class="list-box">
              <ul>
                <li class="clearfix" v-for="(item, index) in houseList" :key="index">
                  <div class="image fl" @click="goPage(item.id)">
                    <img :src="item.img" />
                  </div>
                  <div class="text fl">
                    <h2 class="tit" @click="goPage(item.id)">{{item.title}}</h2>
                    <p class="attr">
                      <span>{{item.kind}}</span>
                      <em class="line"></em>
                      <span>朝{{item.orientation}}</span>
                      <em class="line"></em>
                      <span>建筑面积{{item.builtArea}}㎡</span>
                      <em class="line"></em>
                      <span>套内面积{{item.insideArea}}㎡</span>
                    </p>
                    <p class="attr">
                      <span>{{item.decoration}}</span>
                      <em class="line"></em>
                      <span>{{item.floor}}</span>
                      <em class="line"></em>
                      <span>{{item.builtYear}}年建成</span>
                    </p>
                    <p class="attr">
                      <span>{{item['estate.estateName']}}</span>
                      <em class="line"></em>
                      <span>{{item['estate.location']}}</span>
                    </p>
                    <p class="labs">
                      <el-tag class="tag1" v-show="item.tag1">精选好房</el-tag>
                      <el-tag>{{item.tag2}}</el-tag>
                      <el-tag v-show="item.tag3" style="background-color: #ffeeee;">红本在手</el-tag>
                      <el-tag v-show="item.tag4" style="background-color: #f7f5c5;">有电梯</el-tag>
                      <el-tag v-show="item.tag5">随时可看</el-tag>
                    </p>
                  </div>
                  <div class="price">
                    <p><span><b>{{item.sup}}</b>万</span></p>
                    <p>单价{{item.sub}}元/㎡</p>
                    <!-- <p class="btn"><img src="@/assets/images/contact.png">在线咨询</p> -->
                  </div>
                </li>
              </ul>
            </div>

          </div>

          <!-- 右侧消息栏-start -->
          <div class="other fr">
            <!-- 卖房委托-start -->
            <div class="sold" @click="$router.push({name: 'SellingHouse'})">
              <div class="img-bg"></div>
              <div class="mes">
                <span>足不出户，在线委托</span>
                <h3>卖房委托</h3>
              </div>
            </div>
            <!-- 卖房委托-end -->

            <div class="ad">
              <h3>广告位招租</h3>
            </div>

          </div>
          <!-- 右侧消息栏-end -->

          <!-- 分页-start -->
          <div class="pagination fl" v-show="params.total != 0">
            <el-pagination @current-change="handleCurrentChange" :current-page="params.page" background layout="prev, pager, next" :page-size="20" :total="params.total">
            </el-pagination>
          </div>
          <!-- 分页-end -->

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Search from "@/components/Search";
import "@/assets/less/second-handHouse.less";
import "@/assets/less/base.less";
// import areaData from "@/assets/js/data.js";

export default {
  name: "Second-handHouse",
  components: {
    Search,
  },

  data() {
    return {
      // 复选框信息筛选
      checkList: [],
      // 第一个区域
      firstRegion: {
        value: "不限",
        index: 0,
        level: 2,
      },
      // 第二个区域
      secondRegion: {
        value: "不限",
        index: 0,
        level: 3,
        firstIndex: 0,
      },

      // 区域数据
      areaData: [],

      // 默认显示的筛选信息
      tabList_show: [
        {
          title: "价格",
          tabs: [
            "150万以下",
            "150-200万",
            "200-250万",
            "250-300万",
            "300-400万",
            "400-600万",
            "600万以上",
          ],
          isShow: false,
          isMore: true,
          more_tip1: "+更多及自定义",
          more_tip2: "-更多及自定义",
        },
        {
          title: "面积",
          tabs: [
            "30㎡以下",
            "30-50㎡",
            "50-80㎡",
            "80-100㎡",
            "100-120㎡",
            "120-150㎡",
            "150-200㎡",
            "200㎡以上",
          ],
          isShow: false,
          isMore: true,
          more_tip1: "+更多及自定义",
          more_tip2: "-更多及自定义",
        },
        {
          title: "户型",
          tabs: ["一室", "二室", "三室", "四室", "五室", "五室以上"],
          isShow: false,
          isMore: false,
        },
      ],
      // 自定义价格
      p1: '',
      p2: '',
      // 默认隐藏的筛选信息
      tabList_hide: [
        {
          title: "类型",
          tabs: ["住宅", "公寓", "别墅"],
          isMore: false,
        },
        // {
        //   title: "结构",
        //   tabs: ["开间", "平层", "错层", "跃层", "复式"],
        //   isMore: false,
        // },
        {
          title: "楼层",
          tabs: ["低楼层", "中楼层", "高楼层"],
          isMore: false,
        },
        {
          title: "朝向",
          tabs: [
            "东",
            "南",
            "西",
            "北",
            "东南",
            "东北",
            "西南",
            "西北",
            "南北",
          ],
          isShow: false,
          isMore: true,
          more_tip1: "+展开更多",
          more_tip2: "-展开更多",
        },
        {
          title: "楼龄",
          tabs: [
            "2年以内",
            "5年以内",
            "10年以内",
            "15年以内",
            "20年以内",
            "20年以上",
          ],
          isMore: false,
        },
        {
          title: "装修",
          tabs: ["毛坯", "普装", "精装", "豪装"],
          isMore: false,
        },
      ],

      otherTabs: {
        title: "其他",
        isShow: false,
        isMore: false,
        more_tip1: "+展开更多",
        more_tip2: "-展开更多",
        tabs: [
          // {
          //   name: "新上",
          //   isTip: false,
          // },
          {
            name: "满五唯一",
            isTip: false,
          },
          {
            name: "满五年",
            isTip: false,
          },
          {
            name: "满两年",
            isTip: false,
          },
          {
            name: "红本在手",
            isTip: false,
          },
          {
            name: "随时可看",
            isTip: true,
            content: "经纪人拥有该房源钥匙，您可随时预约经纪人看房",
          },
          {
            name: "有电梯",
            isTip: false,
          },
          // {
          //   name: "近地铁",
          //   isTip: true,
          //   content: "小区到地铁站直径距离小于等于1km",
          // },
          // {
          //   name: "非地下室",
          //   isTip: false,
          // },
        ],
      },
      // 展开/受收起
      hideTab: {
        isShow: false,
        tip1: "展开选项(类型、结构、楼层等)",
        tip2: "收起选项",
      },

      // 默认图片路径
      isSrc: {
        have: "",
        none:
          "https://imgcloud.leyoujia.com/h_pic_default.png?imageMogr2/gravity/Center/crop/400x300/",
      },

      sold: {
        img: require("@/assets/images/sold-house.png"),
        active: require("@/assets/images/sold-house-active.png"),
      },
      order: {
        active: 0,// 排序内容
        type: 0,// 升降序
      },
      houseList: [],
      params: {
        total: 0,// 总数
        page: 1,// 第一页
        size: 20,// 一页20条
        state: 1,// 在售中
        city: '广州',
        title: '',
        sup: [],
        orientation: [],
        area: [],
        firstRegion: '',
        secondRegion: '',
        kind: [],
        purpose: [],
        floor: [],
        builtYear: [],
        decoration: [],
        tag: [],
      },
      checkList2: [],
    };
  },

  created() {
    let isLogin = false;
    if (this.$cookies.get('__tk')) {
      isLogin = true;
    } else {
      isLogin = false;
    }
    let oj = {
      title: "二手房",
      nav: "Second-handHouse",
      isLogin: isLogin,
    };
    this.$emit("isTitle", oj);
    this.areaData = JSON.parse(JSON.stringify(this.$root.areaData));
    console.log('areaData', this.areaData)
    // console.log(this.$store.state.firstRegion);
    if (this.$route.params.text) {
      this.params.title = this.$route.params.text;
    }
    this.init();
  },

  mounted() {
    this.$nextTick(() => {
      document.body.scrollTo(0, 0);
      window.scrollTo(0, 0);
      document.getElementById('index').scrollTop = 0
      window.pageYOffset = 0;
    })
  },

  methods: {
    init() {
      let data = {
        city: this.params.city,
        page: this.params.page,
        size: this.params.size,
        state: this.params.state,
        title: this.params.title,
        orientation: this.params.orientation,
        firstRegion: this.params.firstRegion,
        secondRegion: this.params.secondRegion,
        sup: this.params.sup,
        area: this.params.area,
        kind: this.params.kind,
        purpose: this.params.purpose,
        floor: this.params.floor,
        builtYear: this.params.builtYear,
        decoration: this.params.decoration,
        tag: this.params.tag,
        order: this.order
      }
      this.axios({
        method: 'get',
        url: this.baseUrl + '/getHouseList',
        params: data
      }).then(res => {
        console.log('res==>', res)
        if (res.data.code == 200) {
          this.houseList = res.data.data;
          console.log('List==>', this.houseList)
          this.params.total = res.data.total;
          // this.$message.success(res.data.msg)
        } else {
          this.$message.error(res.data.msg)
        }
      }).catch(err => {
        console.log('err==>', err)
        this.$message.error(res.data.msg)
      })
    },
    // 跳转
    goPage(i) {
      let routeUrl = this.$router.resolve(`/house_detail/${i}`);
      window.open(routeUrl.href, "_blank");
    },
    // 获取组件关键词
    getSearchText(t) {
      // console.log('text==>', t)
      this.params.title = t;
      this.params.page = 1;
      this.init();
    },
    // 改变区域
    changeRegion(o, i) {
      // console.log(o);
      // 点击的区域是高亮,返回
      if (o.isActive) {
        return;
      }

      // 判断父级选项还是子级
      if (o.level == 2) {
        // 清除之前高亮的选项
        for (let key of this.areaData) {
          if (key.isActive) {
            key.isActive = false;
          }
        }
        o.isActive = true; // 点击的选项高亮

        this.firstRegion.value = o.value; // 保存选项的值
        console.log("firstRegion.value", this.firstRegion.value);
        this.firstRegion.index = i; // 保存选项的索引值
        this.secondRegion.index = 0; // 隐藏子选项的标签
        this.params.firstRegion = o.value;
        this.params.secondRegion = '';

        // 初始化子选项高亮
        if (i == 0) {
          // 点击 不限 选项
          this.params.firstRegion = '';
          this.params.secondRegion = '';
          this.params.page = 1;
          this.init();
          return;
        } else {
          this.params.page = 1;
          this.init();
          // 初始化子选项高亮
          if (o.children[0].isActive) {// 子选项为'不限'
            return;
          }

          for (let key of o.children) {
            if (key.isActive) {
              key.isActive = false;
            }
          }
          o.children[0].isActive = true; // 子选项第一个高亮
          this.secondRegion.value = "不限"; // 标签赋值
          console.log("secondRegion.value ==>", this.secondRegion.value);
        }

      } else if (o.level == 3) {
        // 点击选项为子选项
        // 清除之前高亮的选项
        for (let key of this.areaData[this.firstRegion.index].children) {
          if (key.isActive) {
            key.isActive = false;
          }
        }
        o.isActive = true; // 点击的选项高亮

        this.secondRegion.value = o.value; // 赋值
        console.log("secondRegion.value ==>", this.secondRegion.value);
        this.secondRegion.index = i; // 保存索引值
        this.secondRegion.firstIndex = this.firstRegion.index; // 保存父元素索引值
        this.params.secondRegion = i == 0 ? '' : o.value;
        this.params.page = 1;
        this.init();
      }
    },
    // 删除区域标签
    deleteRegion(o) {
      if (o.level == 3) {
        this.areaData[o.firstIndex].children[o.index].isActive = false;
        this.areaData[o.firstIndex].children[0].isActive = true;
        o.value = "不限";
        o.index = 0;
        this.params.secondRegion = '';
        this.params.page = 1;
        this.init();
      }
      if (o.level == 2) {
        this.areaData[0].isActive = true;
        this.secondRegion.index = 0;
        if (this.areaData[o.index].children[this.secondRegion.index].isActive) {
          this.areaData[o.index].isActive = false;
          o.index = 0;
          this.params.firstRegion = '';
          this.params.page = 1;
          this.init();
          return;
        }
        this.areaData[o.index].children[
          this.secondRegion.index
        ].isActive = false;
        this.areaData[o.index].children[0].isActive = true;
        this.areaData[o.index].isActive = false;
        o.index = 0;
        this.params.firstRegion = '';
        this.params.secondRegion = '';
        this.params.page = 1;
        this.init();
      }
    },
    // 展示更多
    changeMore(o) {
      if (o.isShow) {
        o.isShow = false;
      } else {
        o.isShow = true;
      }
    },
    // 筛选框
    changeCheck(label, value) {
      // console.log(this.checkList);
      // console.log('label==>', label)
      // console.log('value==>', value)
      if (label == '价格') {
        let data = value.split(/[-万]/)
        // console.log('data==>', data)

        if (data.slice(-1) == '以下') {
          if (this.params.sup.length > 0 && this.params.sup[0].t == '以下') {
            this.params.sup.splice(0, 1);// 移除
          } else {
            this.params.sup.unshift({ v: data[0], t: '以下' })// 添加
            this.checkList2.push({ label: '价格', value: value });// 保留用作删除标签
          }
        } else if (data.slice(-1) == '以上') {
          if (this.params.sup.length > 0 && this.params.sup.slice(-1)[0].t == '以上') {
            this.params.sup.splice(-1, 1);// 移除
          } else {
            this.params.sup.push({ v: data[0], t: '以上' })// 添加
            this.checkList2.push({ label: '价格', value: value });// 保留用作删除标签
          }
        } else {
          // 判断是否存在
          for (let k in this.params.sup) {
            if (this.params.sup[k].v[0] == data[0] && this.params.sup[k].v[1] == data[1]) {
              this.params.sup.splice(k, 1)// 移除
              console.log('sup==>', this.params.sup)
              this.params.page = 1;
              this.init();
              return
            }
          }
          if (this.params.sup.length > 0 && this.params.sup.slice(-1)[0].t == '以上') {
            this.params.sup.splice(this.params.sup.length - 1, 0, { v: [data[0], data[1]], t: '范围' })// 添加
            this.checkList2.push({ label: '面积', value: value });// 保留用作删除标签
          } else {
            this.params.sup.push({ v: [data[0], data[1]], t: '范围' })// 添加
            this.checkList2.push({ label: '价格', value: value });// 保留用作删除标签
          }
        }
        // sup: ['150', ['150', '200'], '600']
        console.log('sup==>', this.params.sup)
        this.params.page = 1;
        this.init();
      }
      if (label == '面积') {
        let data = value.split(/[-㎡]/)
        // console.log('data==>', data)

        if (data.slice(-1) == '以下') {
          if (this.params.area.length > 0 && this.params.area[0].t == '以下') {
            this.params.area.splice(0, 1);// 移除
          } else {
            this.params.area.unshift({ v: data[0], t: '以下' })// 添加
            this.checkList2.push({ label: '面积', value: value });// 保留用作删除标签
          }
        } else if (data.slice(-1) == '以上') {
          if (this.params.area.length > 0 && this.params.area.slice(-1)[0].t == '以上') {
            this.params.area.splice(-1, 1);// 移除
          } else {
            this.params.area.push({ v: data[0], t: '以上' })// 添加
            this.checkList2.push({ label: '面积', value: value });// 保留用作删除标签
          }
        } else {
          for (let k in this.params.area) {
            if (this.params.area[k].v[0] == data[0] && this.params.area[k].v[1] == data[1]) {
              this.params.area.splice(k, 1)// 移除
              console.log('area==>', this.params.area)
              this.params.page = 1;
              this.init();
              return
            }
          }
          if (this.params.area.length > 0 && this.params.area.slice(-1)[0].t == '以上') {
            this.params.area.splice(this.params.area.length - 1, 0, { v: [data[0], data[1]], t: '范围' })// 添加
            this.checkList2.push({ label: '面积', value: value });// 保留用作删除标签
          } else {
            this.params.area.push({ v: [data[0], data[1]], t: '范围' })// 添加
            this.checkList2.push({ label: '面积', value: value });// 保留用作删除标签
          }
        }
        // area: ['150', ['150', '200'], '600']
        console.log('area==>', this.params.area)
        this.params.page = 1;
        this.init();
      }
      if (label == '户型') {
        let data = value.split(/[室]/)
        console.log('data==>', data)
        if (data[1] == '以上') {
          if (this.params.kind.length > 0 && this.params.kind.slice(-1)[0].t == '以上') {
            this.params.kind.splice(-1, 1);
          } else {
            let num = this.$util.toNumber(data[0])
            this.params.kind.push({ v: num, t: '以上' })// 添加
            this.checkList2.push({ label: '户型', value: value });// 保留用作删除标签
          }
        } else {
          let num = this.$util.toNumber(data[0])
          for (let k in this.params.kind) {
            // console.log('k.v==>', this.params.kind[k].v)
            // console.log('data.v==>', [data[0], data[1]])
            if (this.params.kind[k] == num) {
              this.params.kind.splice(k, 1)
              console.log('kind==>', this.params.kind)
              this.params.page = 1;
              this.init();
              return
            }
          }
          // console.log('num==>', num)
          this.params.kind.unshift(num)// 添加
          this.checkList2.push({ label: '户型', value: value });// 保留用作删除标签
        }
        this.params.page = 1;
        this.init();
      }
      if (label == '类型') {
        for (let k in this.params.purpose) {
          if (this.params.purpose[k] == value) {
            this.params.purpose.splice(k, 1)
            console.log('purpose==>', this.params.purpose)
            this.params.page = 1;
            this.init();
            return
          }
        }
        this.params.purpose.push(value)// 添加
        this.checkList2.push({ label: '类型', value: value });// 保留用作删除标签
        this.params.page = 1;
        this.init();
      }
      if (label == '楼层') {
        for (let k in this.params.floor) {
          if (this.params.floor[k] == value) {
            this.params.floor.splice(k, 1)
            console.log('floor==>', this.params.floor)
            this.params.page = 1;
            this.init();
            return
          }
        }
        this.params.floor.push(value)// 添加
        this.checkList2.push({ label: '楼层', value: value });// 保留用作删除标签
        this.params.page = 1;
        this.init();
      }
      if (label == '朝向') {
        for (let k in this.params.orientation) {
          if (this.params.orientation[k] == value) {
            this.params.orientation.splice(k, 1)
            console.log('orientation==>', this.params.orientation)
            this.params.page = 1;
            this.init();
            return
          }
        }
        this.params.orientation.push(value)// 添加
        this.checkList2.push({ label: '朝向', value: value });// 保留用作删除标签
        this.params.page = 1;
        this.init();
      }
      if (label == '楼龄') {
        let data = value.split(/[年]/)
        console.log('data==>', data)
        let date = new Date();
        let Byear = date.getFullYear() - data[0];
        if (data[1] == '以上') {
          if (this.params.builtYear.length > 0 && this.params.builtYear.slice(-1)[0].t == '以上') {
            this.params.builtYear.splice(-1, 1);
          } else {
            // console.log('Byear==>', Byear)
            this.params.builtYear.push({ v: Byear, t: '以上' })// 添加
            this.checkList2.push({ label: '楼龄', value: value });// 保留用作删除标签
          }
        } else {
          for (let k in this.params.builtYear) {
            if (this.params.builtYear[k] == Byear) {
              this.params.builtYear.splice(k, 1)
              // console.log('builtYear==>', this.params.builtYear)
              this.params.page = 1;
              this.init();
              return
            }
          }
          this.params.builtYear.unshift(Byear)// 添加
          this.checkList2.push({ label: '楼龄', value: value });// 保留用作删除标签
        }
        this.params.page = 1;
        this.init();
      }
      if (label == '装修') {
        for (let k in this.params.decoration) {
          if (this.params.decoration[k] == value) {
            this.params.decoration.splice(k, 1)
            console.log('decoration==>', this.params.decoration)
            this.params.page = 1;
            this.init();
            return
          }
        }
        this.params.decoration.push(value)// 添加
        this.checkList2.push({ label: '装修', value: value });// 保留用作删除标签
        this.params.page = 1;
        this.init();
      }
      if (label == '其他') {
        for (let k in this.params.tag) {
          if (this.params.tag[k].v == value) {
            this.params.tag.splice(k, 1)
            console.log('tag==>', this.params.tag)
            this.params.page = 1;
            this.init();
            return
          }
        }

        if (value == '红本在手') {
          this.params.tag.push({ t: 'tag3', v: value })// 添加
          this.checkList2.push({ label: '其他', value: value });// 保留用作删除标签
        } else if (value == '有电梯') {
          this.params.tag.push({ t: 'tag4', v: value });// 添加
          this.checkList2.push({ label: '其他', value: value });// 保留用作删除标签
        } else if (value == '随时可看') {
          this.params.tag.push({ t: 'tag5', v: value });// 添加
          this.checkList2.push({ label: '其他', value: value });// 保留用作删除标签
        } else {
          this.params.tag.push({ t: 'tag2', v: value });// 添加
          this.checkList2.push({ label: '其他', value: value });// 保留用作删除标签
        }
        this.params.page = 1;
        this.init();
      }
    },
    // 自定义标签
    addTag(i) {
      console.log('自定义标签')
      let str = this.p1 + '-' + this.p2;
      let title = '';
      switch (i) {
        case 0: str = str + '万'; title = '价格'; break;
        case 1: str = str + '㎡'; title = '面积'; break;
        default: ''; break;
      }
      for (let k of this.checkList) {
        if (k == str) {
          return
        }
      }
      this.checkList.push(str)
      this.changeCheck(title, str);
    },
    // 删除标签
    deleteTag(i) {
      this.checkList.splice(i, 1);
      // console.log('checkList2==>', this.checkList2)
      // this.checkList2.push({ label: '其他', value: value });// 保留用作删除标签
      this.changeCheck(this.checkList2[i].label, this.checkList2[i].value)
      this.checkList2.splice(i, 1);
    },
    // 清空标签
    deleteTags() {
      this.checkList = [];
      this.params.page = 1;
      this.params.size = 20;
      this.params.state = 1;
      this.params.city = '广州';
      this.params.title = '';
      this.params.sup = [];
      this.params.orientation = [];
      this.params.area = [];
      this.params.firstRegion = '';
      this.params.secondRegion = '';
      this.params.kind = [];
      this.params.purpose = [];
      this.params.floor = [];
      this.params.builtYear = [];
      this.params.decoration = [];
      this.params.tag = [];
      this.order = {
        active: 0,// 排序内容
        type: 0,// 升降序
      },
        this.init();
      if (this.firstRegion.index == 0) {
        return;
      }
      this.deleteRegion(this.firstRegion);
    },
    // 改变排序
    changeOrder(i) {
      if (this.order.active == i) {
        if (this.order.active == 0 || this.order.active == 1) {
          this.order.type = 0;
          return
        }
        if (this.order.type == 0) {
          this.order.type = 1;
        } else {
          this.order.type = 0;
        }
        this.params.page = 1;
        this.init();
        return
      }
      this.order.active = i;
      this.order.type = 0;
      this.params.page = 1;
      this.init();
    },
    // 当前页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.params.page = val;
      this.init();
      this.$nextTick(() => {
        document.body.scrollTo(0, 0);
        window.scrollTo(0, 0);
        document.getElementById('index').scrollTop = 0
        window.pageYOffset = 0;
      })
    },
  },
};
</script>

<style lang="less" scoped>
</style>